<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>


    <link href="css/productdetail/body.css" rel="stylesheet" >
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>

<!--顶部-->
<div class="head" >

    <div class="head_btn1">
        <h1>petq商城</h1>
        <!--  <a id="list" ></a> -->
    </div >
    <div class="head_btn2">
        <button type="button" onclick="javascript:history.back(-1);" style="display: inline;">返回</button>
        <!--  <a id="list" ></a> -->
    </div >         <!--单个商品详情-->
</div>

<div class="MobodyC" >
    <span id="imgType3"><img src=""/></span>



</div>

<div class="h1-title">
    <span>商品：</span><span class="title"></span>
</div>
<div class="big-classify">
    <span>价格：</span><span class="price">价格</span><span>元</span>
</div>


<div id="number"><span>已选择数量：</span>
    <div id="app" style="display: inline;">
        <button @click="minus">-</button>
        <span class="num">{{n}}</span>
        <button @click="add">+</button>
        <span class="qb_fs_s mod_color_comment" style="display:inline">&nbsp;库存：<span id="stock-num">库存</span>件</span>
    </div>
</div>

<div id="detail">
<h2>商品详情</h2>
    <span id="imgType4"><img src=""/></span>


</div>

<div class="footer">

    <button type="button" onclick="forCustomerService()" style="display: inline;">客服</button>
    <button type="button" onclick="order_cart()" style="display: inline;">购物车</button>
    <button type="button" onclick="order_pay()" style="display: inline;">购买</button>


</div>

<!--<span class="productId" th:valud="${produtId}" ></span>-->
<script type="text/javascript">

    // //点击返回产品列表页
    // function forProductList(){
    //     alert("返回产品列表页");
    // }

    //点击购车页面跳转到购物车
    function order_cart(){
        let productId = "productId="+[[${productId}]];
        let productCounts ="productCounts="+$(".num").html();
        let productSizeId="productSizeId="+1;
        let userId="userId="+1;

        let url ="/doSaveOrderCart?"+productId+"&"+productCounts+"&"+productSizeId+"&"+userId;
        $.get(url,function (data) {
           if(data.status == 200){
                window.location.href= "/ordercart";
            }else{
                alert("添加购物车失败!");
            }
        })
    }

    function order_pay(){
        // alert("支付页面")
        // let productId = "productId="+[[${productId}]];
        // let productCounts ="productCounts="+$(".num").html();
        // let userId =1;
        //
        //
        // let url = "/doSaveOrderPay?"+productId+"&"+productCounts+"&"+userId;
        //
        // $.post(url,function (data) {
        //     if(data.status == 200){
        //         alert('进入支付页面!');
        //         window.location.href= "/ordersubmit";
        //     }else{
        //         alert("失败!");
        //     }
        // })
        let url ="/doSaveOrderPayDirectly";
        let params = {"productId":[[${productId}]],
                      "productCounts":$(".num").html()};
        $.post(url,params,function(result){
            if(result.status==200){
                let orderId =result.data;
                window.location.href= "/orderSubmit?orderId="+orderId;
            }
        })
    }


    $(function () {

        let productId = "productId="+[[${productId}]];
        var url ="/doFindProductDetailByProductId";
        $.get(url,productId,function (result) {
            let data=result.data;
            // debugger;
            var priceView = (data.price/100).toFixed(2);
            $(".title").html(data.title)
            $(".price").html(priceView);
            $("#stock-num").html(data.stock);
        })
    })

    $(function () {
        //debugger;
        let productId = "productId=" + [[${productId}]];
        let imgType1 = "imgType=" + 1;
        var url ="/doFindImagesByProductId?"+productId+"&"+imgType1;
        $.get(url, function (result) {
            let data = result.data;
            console.log(data);

        })

    })
    $(function () {
        //debugger;
        let productId = "productId=" + [[${productId}]];
        let imgType2 = "imgType=" + 2;
        var url ="/doFindImagesByProductId?"+productId+"&"+imgType2;
        $.get(url, function (result) {
            let data = result.data;
            console.log(data);

        })

    })
    $(function () {
        // debugger;
        let productId = "productId=" + [[${productId}]];
        let imgType3 = "imgType=" + 3;
        var url ="/doFindImagesByProductId?"+productId+"&"+imgType3;
        $.get(url, function (result) {
            let data = result.data;
            console.log(data);
            $("#imgType3 img").attr("src","http://image.pq.com/"+data.imgUrl);

        })

    })

    $(function () {
        //debugger;
        let productId = "productId=" + [[${productId}]];
        let imgType4 = "imgType=" + 4;
        var url ="/doFindImagesByProductId?"+productId+"&"+imgType4;
        $.get(url, function (result) {
            let data = result.data;
            console.log(data);
            $("#imgType4 img").attr("src","http://image.pq.com/"+data.imgUrl);

        })

    })

    //客服电话
    function forCustomerService() {

        alert("客服电话：18828883888！");
    }



    


</script>

<script>
    new Vue({
        el:"#app",
        data:{
            n:1 //起始值为1
        },
        methods:{
            add(){
                this.n++ //访问data中变量必须用this
            },
            minus(){
                if(this.n>0){ this.n-- }
            }
        }
    })
</script>

</body>
</html>